<template>
  <view class="left__biggoods-page">
    <view v-for="(item, index) in dataList" :key="index" class="con__box">
      <view class="i__title">{{ item.title }}</view>
      <LeftSecondgoodsPt v-if="modeType === 0" :propData="formData" :dataList="item.list"></LeftSecondgoodsPt>
      <LeftSecondgoodssc v-else :propData="formData" :dataList="item.list"></LeftSecondgoodssc>
    </view>
  </view>
</template>

<script lang='ts'>
  import {
    Component,
    Vue,
    Prop,
    Watch
  } from 'vue-property-decorator'
  import {
    getEffectCategoryGoods
  } from "@/api/modules/goods";
  import LeftSecondgoodsPt from '../left-secondgoods/left-secondgoods.vue';
  import LeftSecondgoodssc from '@/pages/index/modules/mall/components/left-second-goods/leftSecondGoods.vue';

  @Component({
    components: {
      LeftSecondgoodsPt,
      LeftSecondgoodssc
    }
  })
  export default class LeftBiggoods extends Vue {
    @Prop() propData: any

    formData: any = {}
    dataList: Array < any > = []
    showCategoryId: string = ""
    modeType: number = 1
    isFirst: boolean = true

    @Watch("propData", {
      deep: true
    })
    getFormData() {
      if (this.propData) {
        this.setData({
          dataList: [],
        });
        this.formData = this.propData
        if (!this.formData.firstCatList.length) return;
        const showCategoryId = this.isFirst ?
          this.formData.firstCatList[0].category.id :
          this.formData.currentFirstCategory.category.id;
        this.formData.currentFirstCategory = this.isFirst ?
          this.formData.firstCatList[0] :
          this.formData.currentFirstCategory;
        this.setData({
            showCategoryId,
            modeType: 1,
          },
          () => {
            this.getAllList();
            this.isFirst = false;
          },
        );
      }
    }

    /**
     * 获取商品
     */
    async getAllList() {
      const param = {
        saleMode: this.formData.saleMode,
      };
      getEffectCategoryGoods(this.showCategoryId,param).then(res => {
        const dataList = [] as any;

        res.forEach(sd => {
          dataList.push({
            title: sd.name,
            list: sd.apiAliveProductVos,
          });
        });
        this.setData({
          dataList
        });
      });
    }

    // 组件周期函数--监听组件挂载完毕
    mounted() {
      this.getFormData()
    }
  }
</script>

<style lang="scss" scoped>
  .left__biggoods-page {
    .i__title {
      height: 33px;
      box-sizing: border-box;
      color: #999999;
      background-color: #ffffff;
      padding-top: 20px;
    }

    .spellpre__goodsB--icon {
      height: 130px;

      .ipic {
        height: 130px;
        border-radius: 8px;
      }
    }

    .spellpre__goodsL--icon {
      height: 90px;
      width: 90px;

      .ipic {
        height: 90px;
        width: 90px;
        border-radius: 8px;
      }
    }

    .spellpre__goodsL--info {
      overflow-x: hidden;
    }

    .spellpre__goodsL--name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
</style>